	var canvas = document.getElementById("cas");
	var ctx = canvas.getContext("2d");
	resize();
	window.onresize = resize;

	//设置画布大小
	function resize() {
		canvas.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
		//canvas.height = (window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight);
		canvas.height =108;
	}
	var RAF = (function() {
		return function(callback) {
			//一般不会触发
			window.setTimeout(callback, 1000/30);//设置帧率 
		}
		
	})();
	var warea = {
		x: null,
		y: null,
		max: 10000//鼠标感应距离
	};
	window.onmousemove = function(e) {
		e = e || window.event;
		warea.x = e.clientX;
		warea.y = e.clientY
	};
	window.onmouseout = function(e) {
		warea.x = null;
		warea.y = null
	};
	var dots = [];
	// i 数量
	for (var i = 0; i < 30; i++) {
		var x = Math.random() * canvas.width;
		var y = Math.random() * canvas.height;
		var xa = Math.random() * 2 - 1;
		var ya = Math.random() * 2 - 1;
		dots.push({
			x: x,
			y: y,
			xa: xa,
			ya: ya,
			max: 10000 //长度
		})
	}
	//颜色渐变
	var cR=255,cG=255,cB=255;
	var bR={x:false};bG={x:false};bB={x:false};
	window.setInterval(function(){
		cR=CoChange(cR,bR,1);
		cG=CoChange(cG,bG,3);
		cB=CoChange(cB,bB,5);
	//	console.log("RGB="+cR+","+cG+","+cB);
	},100);
	function CoChange(C,B,T){
		if(B.x){
			if(C+T>255){
				B.x=!B.x;
				return CoChange(C,B,T);
			}else{
				return C+T;
			}
		}else{
			if(C-T<0){
				B.x=!B.x;
				return CoChange(C,B,T);
			}else{
				return C-T;
			}
		}
	}

	function animate() {
		ctx.clearRect(0, 0, canvas.width, canvas.height);
		var ndots = [warea].concat(dots);
		dots.forEach(function(dot) {
			dot.x += dot.xa;
			dot.y += dot.ya;
			dot.xa *= (dot.x > canvas.width || dot.x < 0) ? -1 : 1;
			dot.ya *= (dot.y > canvas.height || dot.y < 0) ? -1 : 1;
			ctx.fillStyle="white";//设置端点颜色
			//ctx.fillStyle='rgb('+cR+','+cG+','+cB+')';//设置端点颜色
			ctx.fillRect(dot.x - 0.5, dot.y - 0.5, 1, 1);
			for (var i = 0; i < ndots.length; i++) {
				var d2 = ndots[i];
				if (dot === d2 || d2.x === null || d2.y === null) continue;
				var xc = dot.x - d2.x;
				var yc = dot.y - d2.y;
				var dis = xc * xc + yc * yc;
				var ratio;
				if (dis < d2.max) {
					if (d2 === warea && dis > (d2.max / 2)) {
						dot.x -= xc * 0.03;
						dot.y -= yc * 0.03
					}
					ratio = (d2.max - dis) / d2.max;
					ctx.beginPath();
					ctx.lineWidth = ratio / 2;
					ctx.strokeStyle = 'rgba('+cR+','+cG+','+cB+',' + (ratio + 0.2) + ')';
					ctx.strokeStyle = 'rgba('+cR+','+cG+','+cB+',0.6)';
					//ctx.strokeStyle = 'rgb('+Math.random()*255+','+Math.random()*255+','+Math.random()*255+')';
					//ctx.strokeStyle = 'rgba(255,0,0,0.9)';
					//ctx.strokeStyle="blue";
					ctx.moveTo(dot.x, dot.y);
					ctx.lineTo(d2.x, d2.y);
					ctx.stroke();
				}
			}
			ndots.splice(ndots.indexOf(dot), 1)
		});
		RAF(animate)
	};
	setTimeout(animate,100);//延迟启动